<script>

</script>

<div class="hot-tags">
    <a href="1">购物 <iconify-icon icon="weui:shop-filled" class="icon"></iconify-icon>  </a>
    <a href="1">娱乐 <iconify-icon icon="ph:mask-happy-fill" class="icon"></iconify-icon>  </a>
    <a href="1">工具 <iconify-icon icon="fa-solid:tools" class="icon"></iconify-icon>  </a>
    <a href="1">艺术设计 <iconify-icon icon="mdi:art" class="icon"></iconify-icon>  </a>
    <a href="1">无障碍 <iconify-icon icon="healthicons:obstetricsmonia" class="icon"></iconify-icon>  </a>
</div>

<style lang="less">
.hot-tags{
    display: grid;
    width: 100%;
    column-gap: 20px;
    row-gap: 20px;
    grid-template-columns: repeat(4,1fr);
    a{
        flex: 1;
        background: var(--app-theme-opacity10);
        height: 80px;
        display: flex;
        justify-content: space-between;
        border-radius: var(--app-box-radius);
        align-items: center;
        padding: 0 20px;
        transition: all 0.2s;
        
        .icon{
            font-size: 24px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--app-theme-opacity20);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        &:hover{
            background: var(--app-theme-opacity20);
        }
    }
}


@media (max-width: 1024px) {
        .hot-tags{
            grid-template-columns: repeat(2,1fr);
        }
}
</style>